A classe 'nav' no bootstrap foi feita para implementar menus de navegação, aquele conjunto de links no topo da página ou na lateral apontando para diversas outras páginas ou funcionalidades do site.

Tamanhos das barras de navegação:

As barras de navegação seguem o padrão bootstrap de tamanhos:
.navbar-xl : Extra-Grande(computadores)
.navbar-lg : Grande(computadores e tablets)
.navbar-md : Média (tablets e celulares)
.navbar-sm : Pequena (celulares)

navbar-xl:


navbar-lg:


Tipos de Navbar no BootStrap:

.navbar-brand Quando representa uma empresa, produto ou nome do projeto.

Declaração : <nav class="navbar navbar-brand" style="background-color:lightblue">

Como o browser exibe:


.navbar-nav Quando desejar que a barra de navegação ocupe a linha atual do browser até o fim (largura total-incluindo suporte para menus suspensos).

Declaração : <nav class="navbar navbar-nav" style="background-color:lightblue">

Como o browser exibe:



.navbar-toggler quando se deseja exibir ou esconder(collapse) o menu e outros efeitos visuais indicando alternância de navegação.

Declaração : <nav class="navbar navbar-toggler" style="background-color:lightblue">

Como o browser exibe:


Botão para troca do estilo do navbar-toogle:

Declaração:
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

Apresentação no browser:


.collapse.navbar-collapse para agrupar e ocultar o conteúdo da navbar por um ponto de interrupção pai.

Declaração : <nav class="navbar collapse.navbar-collapse" style="background-color:lightblue">

Como o browser exibe:


No header com o texto 'Página responsiva usando BootstrapPage' utilizei :
1-Uma nav :
<nav class="navbar navbar-light mb-4" style="background-color:aqua">
com os parâmetros:
class="navbar : avisa o bootstrap que o elemento a ser formatado é um navbar.
navbar-light : é o estilo do navbar a ser empregado:
com a cor azul clara (navbar-light) e uma margem inferior de 4. Ficou assim:





<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>